<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Breadcrumbs</title>
<link rel="stylesheet" type="text/css" media="all"  href="../../core/libraries.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../plugins/breadcrumb/breadcrumb.css" />
</head>

<body>
<h1>Breadcrumbs</h1>
<h2>short test</h2>
<ul class="breadcrumb">
	<li><a href="#">Top Level Title</a></li>
  <li>Current Page Title</li>
</ul>
<h2>long test</h2>
<ul class="breadcrumb">
	<li><a href="#">Top Level Title</a></li>
  <li><a href="#">Second Level Title</a></li>
  <li><a href="#">Third Level Title</a></li>
  <li><a href="#">Fourth Level Title</a></li>
  <li><a href="#">Fifth Level Title</a></li>
	<li><a href="#">Sixth Level Title</a></li>
  <li><a href="#">Seventh Level Title</a></li>
  <li>Current Page Title</li>
</ul>
<h2>long item test</h2>
<ul class="breadcrumb">
	<li><a href="#">Top Level Title</a></li>
  <li><a href="#">Second Level is really really long and wraps at small widths lorem ipsum doler lorem ipsum doler lorem ipsum doler lorem ipsum doler lorem ipsum doler </a></li>
  <li><a href="#">Third Level Title</a></li>
  <li><a href="#">Fourth Level Title</a></li>
  <li><a href="#">Fifth Level Title</a></li>
	<li><a href="#">Sixth Level Title</a></li>
  <li><a href="#">Seventh Level Title</a></li>
  <li>Current Page</li>
</ul>
<p>Currently tested on Safari, FF, Opera, & Chrome. Likely to have issues in IE6&7 due to advanced selectors, needs img backup. </p>
</body>
</html>
